.title {
  color: var(--primary-color);
}

.text {
  color: var(--secondary -color);
}

.error {
  .title {
    color: var(--red-light);
  }

  .text {
    color: var(--red-dark);
  }
}

.inverted {
  .title {
    color: var(--inverted-primary-color);
  }

  .text {
    color: var(--inverted-secondary-color);
  }
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.size_s {
  .title {
    font: var(--font-m);
  }

  .text {
    font: var(--font-s);
  }
}

.size_m {
  .title {
    font: var(--font-l);
  }

  .text {
    font: var(--font-m);
  }
}

.size_l {
  .title {
    font: var(--font-xl);
  }

  .text {
    font: var(--font-l);
  }
}
